<template>
  <div class="staffAudit">
    <div class="bgg">
      <div class="groupbox flex row_bet flex_wrap">
        <div class="card_title">
          段位设置
        </div>
        <div>
          <a-button type="primary" size="small" @click="drawershow = true">
            添加
          </a-button>
        </div>
      </div>
      <a-table
        :columns="columns"
        :rowKey="(item,index) => index"
        :dataSource="activity"
        :loading="loading"
        :pagination="false"
      >
        <div slot="active" slot-scope="row">
          <a-space>
            <a-button type="link" @click="openD(row)">编辑</a-button>
            <a-popconfirm placement="bottom" ok-text="确定" cancel-text="取消" @confirm="doDelSiteData(row.lev_id)">
              <template #title>
                <p>是否删除?</p>
              </template>
              <a-button type="link">
                <span style="color:red">删除</span>
              </a-button>
            </a-popconfirm>
          </a-space>
        </div>
      </a-table>
    </div>
    <a-drawer
      :title="isadd?'添加段位':'修改段位'"
      :width="513"
      :visible="drawershow"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <div class="drawer1">
        <div class="titles">服务费数值</div>
        <a-input v-model="info.lev_num" placeholder="请输入服务费"/>
        <div class="titles" style="margin-top: 15px">段位名称</div>
        <a-input v-model="info.lev_name" placeholder="请输入段位名称"/>
        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1
          }"
        >
          <a-button
            type="primary"
            style="float:left;"
            :disabled="btnloading"
            :loading="btnloading"
            class="br4"
            @click="dosubmit">
            <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
            {{ isadd ? '确认新增':'确认修改' }}
          </a-button>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script>
  import moment from 'moment'

  import { getSiteLevel, doupdatesiteLevel, doDelSiteData, doAddSiteInfo } from '@/api/admin/site'

  export default {
    name: 'StaffAudit',
    data () {
      return {
        moment,
        isadd: true,
        lev_name: '',
        lev_num: '',
        drawershow: false,
        status: 1,
        search: '',
        columns: [
          {
            title: 'ID',
            align: 'left',
            dataIndex: 'lev_id',
            scopedSlots: {
              customRender: 'lev_id'
            }
          },
          {
            title: '服务费',
            // width: 150,
            align: 'center',
            dataIndex: 'lev_num',
            scopedSlots: {
              customRender: 'lev_num'
            }
          },
          {
            title: '段位',
            align: 'center',
            dataIndex: 'lev_name',
            scopedSlots: {
              customRender: 'lev_name'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        activity: [
          // {
          //   lev_id: 3, // id
          //   lev_num: 1000, // 服务费数值，
          //   lev_name: '塑料'// 段位名称
          // }
        ],
        loading: false,
        pagination: {
          pageSize: 15,
          page: 1
        },
        info: {},
        value: '',
        btnloading: false
      }
    },

    computed: {},
    created () {
      this.getSiteLevel(1)
    },
    mounted () {
    },
    methods: {
      openD (row) {
        console.log(row)
        this.info = row
        this.isadd = false
        this.drawershow = true
      },
      dosubmit () {
        this.btnloading = true
        if (this.info.lev_id) {
          if (this.info.lev_num !== '' && this.info.lev_name !== '') {
            doupdatesiteLevel({
              id: this.info.lev_id,
              lev_num: this.info.lev_num,
              lev_name: this.info.lev_name
            }).then(res => {
              console.log(res)
              if (res.code === 200) {
                this.btnloading = false
                this.onClose()
                this.$message.success('修改成功!')
                this.getSiteLevel(1)
              } else {
                this.btnloading = false
                this.$message.error(res.msg)
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            this.btnloading = false
            this.$message.info('请检查条件!')
          }
        } else {
          if (this.info.lev_num !== '' && this.info.lev_name !== '') {
            doAddSiteInfo({
              lev_num: this.info.lev_num,
              lev_name: this.info.lev_name
            }).then(res => {
              console.log(res)
              if (res.code === 200) {
                this.btnloading = false
                this.onClose()
                this.$message.success('新增成功!')
                this.getSiteLevel(1)
              } else {
                this.btnloading = false
                this.$message.error(res.msg)
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            this.btnloading = false
            this.$message.info('请检查条件!')
          }
        }
      },
      onClose () {
        this.info = {}
        this.isadd = true
        this.drawershow = false
      },

      doDelSiteData (id) {
        doDelSiteData({
          id: id
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('删除成功!')
            this.getSiteLevel(1)
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      disabledEndDate (endValue) {
        if (!endValue) {
          return false
        }
        return endValue < moment().subtract(1, 'days') || endValue > moment().add(30, 'days')
      },
      getSiteLevel () {
        this.loading = true
        getSiteLevel()
          .then(res => {
            console.log('列表', res)
            this.activity = res.data
            this.loading = false
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  }
</script>
<style lang="less">
  .drawer1 {
    .titles {
      color: rgba(16, 16, 16, 100);
      font-size: 13px;
      text-align: left;
      margin-bottom: 8px;

      a {
        line-height: 23px;
      }
    }

    .chooseipt {
      width: 100%;
      margin-bottom: 25px;
    }

    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-select-selection {
      border-radius: 4px;
    }
  }
</style>
<style lang="less" scoped>
  .staffAudit {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 20px;
      margin-bottom: 18px;
      font-weight: 600;
    }

    .bgg {
      border-radius: 8px;
      margin-top: 10px;
      padding: 10px;
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    /deep/ .ant-table-body {
      border: 1px solid #BBBBBB;
      border-radius: 8px 8px 0 0;
    }

    /deep/ .ant-table-tbody {
      background-color: #ffffff;
    }

    /deep/ .ant-table-pagination.ant-pagination {
      float: none !important;
      margin: 16px auto !important;
      text-align: center !important;
    }

  }
</style>
